<html lang="en" ng-app="KubernetesScaleDemo">
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body>
    <div layout="column" style="margin-top: 20px; width: 80%" offset="10" ng-controller="AppCtrl">
      <md-toolbar layout="row" layout-align="space-around center">
	<h1 class="md-display-2">Kubernetes Scale Demo</h1>
	<a href="https://k8s.io"> <img src="https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo/logo.png" style="width:84; height: 84" />
	</a>
      </md-toolbar>
      <div id="content" class="md-whiteframe-z2" style="padding: 20px">
	<div layout="row">
	  <div layout-margin="10px" flex="25" style="text-align: right">
	    <div class="md-subhead">Requests per Second</div>
	    <div style="text-align: right;">
	      <div class="md-display-1">{{ controller.getQPS() | number:2 }}</div>
	    </div>
	  </div>
	  <div flex layout-margin="10px">
	    <canvas id="qps" class="chart chart-line" chart-data="controller.qpsData" chart-legend="false"
		    chart-labels="controller.labels" chart-series="controller.qpsSeries"
		    chart-options="controller.qpsOptions" chart-colours="controller.qpsColors">
	    </canvas>
	  </div>
	</div>
	<div layout="row">
	  <div layout-margin="10px" flex="25" style="text-align: right">
	    <div class="md-subhead">Avg. Request Latency</div>
	    <div style="text-align: right">
	      <div class="md-display-1">{{ controller.getLatency()["mean"] | number:2 }} ms</div>
	    </div>
	    <div class="md-subhead">99% Request Latency</div>
	    <div style="text-align: right">
	      <div class="md-display-1">{{ controller.getLatency()["99th"] | number:2 }} ms</div>
	    </div>
	  </div>
	  <div flex layout-margin="10px">
	    <canvas id="latency" class="chart chart-line" chart-data="controller.latencyData" chart-legend="false"
		    chart-labels="controller.labels" chart-series="controller.latencySeries"
		    chart-options="controller.latencyOptions">
	    </canvas>
	  </div>
	</div>
	<div layout="row">
	  <div layout-margin="10px" flex="25" style="text-align: right">
	    <div class="md-subhead">Server Availability</div>
	    <div style="text-align: right">
	      <div class="md-display-1">{{ controller.getSuccess() | number:0 }}%</div>
	    </div>
	  </div>
	  <div layout-margin="10px" flex="50" style="text-align: right">
	    <div class="md-subhead"># Servers</div>
	    <div style="text-align: right">
	      <div class="md-display-1">{{ controller.getServerCount() | number:0 }}</div>
	    </div>
	  </div>
	  <div layout-margin="10px" flex="17" style="text-align: right">
	    <div class="md-subhead"># Loadbots</div>
	    <div style="text-align: right">
	      <div class="md-display-1">{{ controller.getLoadbotCount() | number:0 }}</div>
	    </div>
	  </div>
	</div>

<!--
	<div layout="row">
	  <div layout-margin="10px" flex="25" style="text-align: right">
	    <div class="md-subhead">Server Availability</div>
	    <div style="text-align: right">
	      <div class="md-display-1">{{ controller.getSuccess() | number:0 }}%</div>
	    </div>
	  </div>
	  <div flex layout-margin="10px">
	    <canvas id="availability" class="chart chart-line" chart-data="controller.availData" chart-legend="false"
		    chart-labels="controller.labels" chart-series="controller.availSeries"
		    chart-options="controller.availOptions" chart-colours="controller.availColors">
	    </canvas>
	  </div>
	</div>
-->
      </div>
      <!-- Angular Material Dependencies -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
      <script src="Chart.js"></script>
      <script src="angular-chart.js"></script>
      <script src="script.js"></script>
    </div>
  </body>
</html>
